<template>
	<view class="container">
		<u-sticky>
			<view class="header">
				<view class="header-content">
					<view class="back-button" @click="goBack()">
						<u-icon name="arrow-left" color="#000" size="20"></u-icon>
					</view>
					<view class="title">
						向导编辑资料
					</view>
					<view class="placeholder"></view>
				</view>
			</view>
		</u-sticky>
		<scroll-view class="content-scroll" scroll-y="true">
			<view class="content">
				<view class="content-box">
					<view class="content-box-left">
						头像
					</view>
					<view class="content-box-right" @click="uploadAvatar">
						<image :src="queryParams.avatar" mode=""></image>
					</view>
				</view>

				<view class="content-box">
					<view class="content-box-left">
						昵称
					</view>
					<view class="content-box-ipt">
						<u--input placeholder="请输入内容" border="none" v-model="queryParams.nickName"
							inputAlign="right"></u--input>
					</view>
				</view>

				<view class="content-box-type2">
					<view class="content-box-type2-title">
						<view class="content-box-type2-title-left">
							<view class="content-box-type2-title-left-t1">
								主页背景图
							</view>
							<view class="content-box-type2-title-left-t2">
								（可传多张）
							</view>
						</view>
					</view>
					<u-divider lineColor="rgba(41, 41, 48, 0.05)" style="padding: 0;margin: 0;"></u-divider>
					<view class="content-box-type2-footer">
						<view class="upload-container">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="5" :width="uploadImageSize + 'rpx'" :height="uploadImageSize + 'rpx'"
								:previewFullImage="true">
								<image src="/static/authentication/expertInformation-upLoadPicture.png"
									mode="aspectFill"
									:style="{width: uploadImageSize + 'rpx', height: uploadImageSize + 'rpx'}"></image>
							</u-upload>
						</view>
						<view class="content-box-type2-footer-bottom">
							上传你的美照、旅行生活、美食等
						</view>
					</view>
				</view>

				<view class="content-box-type2">
					<view class="content-box-type2-title">
						<view class="content-box-type2-title-left">
							<view class="content-box-type2-title-left-t1">
								向导介绍
							</view>
							<view class="content-box-type2-title-left-t2">
								（150字内）
							</view>
						</view>
					</view>
					<u-divider lineColor="rgba(41, 41, 48, 0.05)" style="padding: 0;margin: 0;"></u-divider>
					<view class="content-box-type2-footer">
						<view class="My-textarea">
							<uni-easyinput type="textarea" v-model="queryParams.remark"
								placeholder="例：我曾在xx年-xx年，拥有x年专职导游经验，涵盖亲子家庭、银发群体、文化研学团队等不同人群类型。专业资质方面，目前持有xx证书等，可为特色线路设计提供专业支撑......"
								:inputBorder="false" maxlength="150"
								:styles="{backgroundColor: '#fff',color: '#333',borderColor: '#ddd'}"></uni-easyinput>
							<view class="inputCount">
								{{ queryParams.remark.length || 0 }}/150
							</view>
						</view>
					</view>
				</view>

				<view class="content-box-type2">
					<view class="content-box-type2-title">
						<view class="content-box-type2-title-left">
							<view class="content-box-type2-title-left-t1">
								向导标签
							</view>
							<view class="content-box-type2-title-left-t2">
								<!-- （最多填写五个） -->
							</view>
						</view>
						<view class="add-tag-btn" @click="openTagSelectionPopup">
							添加
						</view>
					</view>
					<u-divider lineColor="rgba(41, 41, 48, 0.05)" style="padding: 0;margin: 0;"></u-divider>
					<view class="content-box-type2-footer">
						<view class="my-block" :class="tagList.length === 0?'tag-empty-state':''">
							<view class="tag-header-container">
								<view class="selected-tags-container" v-if="tagList.length > 0">
									<view class="selected-tags-list">
										<view v-for="(tag, index) in tagList" :key="tag.topicId"
											class="selected-tag-item">
											<u-tag :text="tag.topicTitle" shape="circle" closable
												:bgColor="tagBg[getTagIndex(tag.topicId, index)].color"
												:borderColor="tagBg[getTagIndex(tag.topicId, index)].color"
												@close="removeSelectedTag(index)">
											</u-tag>
										</view>
									</view>
								</view>
								<view v-else class="no-tags-prompt">
									暂无标签，点击"添加"选择标签
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 底部占位区域，确保内容不被底部按钮遮挡 -->
				<view class="footer-spacer"></view>
			</view>
		</scroll-view>

		<!-- 固定在底部的按钮 -->
		<view class="footer-btn-wrapper-fixed">
			<view class="footer-btn-fixed" @click="handleLook">
				主页预览
			</view>
			<view class="footer-btn-fixed" @click="submitForm">
				提交
			</view>
		</view>

		<!-- 标签选择弹框 -->
		<u-popup :show="showTagSelectionPopup" @close="closeTagSelectionPopup" mode="bottom" round="10">
			<view class="tag-popup-content">
				<view class="popup-header">
					<text>选择标签</text>
					<u-icon name="close" size="20" @click="closeTagSelectionPopup"></u-icon>
				</view>
				<scroll-view scroll-y style="max-height: 60vh;" class="popup-scroll-content">
					<!-- 预设标签 -->
					<view v-for="(category, catIndex) in popupTagCategories" :key="catIndex"
						class="tag-category-section">
						<view class="popup-section-title">{{ category.title }}</view>
						<view class="tag-item-container">
							<view v-for="(tag, tagIndex) in category.topicsList" :key="tag.topicId"
								class="popup-tag-item">
								<u-tag :text="tag.title" shape="circle" :name="tag.topicId"
									@click="toggleTagInPopup(tag)" :plain="!isTagSelectedInPopup(tag.topicId)"
									:bgColor="isTagSelectedInPopup(tag.topicId) ? tagBg[getTagIndex(tag.topicId, transientTagListInPopup.findIndex(t => t.topicId === tag.topicId))].color : '#FFFFFF'"
									:color="isTagSelectedInPopup(tag.topicId) ? '#2F2E35' : '#606266'"
									:borderColor="isTagSelectedInPopup(tag.topicId) ? tagBg[getTagIndex(tag.topicId, transientTagListInPopup.findIndex(t => t.topicId === tag.topicId))].color : '#DCDADB'"
									:icon="isTagSelectedInPopup(tag.topicId) ? cachedTagIcons[getTagIndex(tag.topicId, transientTagListInPopup.findIndex(t => t.topicId === tag.topicId))] : ''">
								</u-tag>
							</view>
						</view>
					</view>

					<!-- 自定义标签输入区域 -->
					<view class="popup-section-title">自定义标签</view>
					<view class="custom-tag-input-section">
						<u-input placeholder="请输入自定义标签" border="surround" v-model="newCustomTagInPopup"
							customStyle="flex:1; margin-right: 20rpx;"></u-input>
						<view class="custom-tag-input-add">
							<u-button @click="addCustomTagFromPopupInput" color="#ff9900" type="primary" :plain="true"
								size="small" text="添加"></u-button>
						</view>
					</view>

					<!-- 自定义标签展示区域 -->
					<view class="custom-tags-display-section" v-if="getCustomTagsInPopup().length > 0">
						<view class="popup-section-title">已添加的自定义标签</view>
						<view class="tag-item-container">
							<view v-for="(tag, customTagIndex) in getCustomTagsInPopup()" :key="tag.topicId"
								class="popup-tag-item">
								<u-tag :text="tag.topicTitle" shape="circle"
									:bgColor="tagBg[getTagIndex(tag.topicId, customTagIndex)].color" closable
									:borderColor="tagBg[getTagIndex(tag.topicId, customTagIndex)].color" color="#fff"
									@close="removeCustomTagInPopup(customTagIndex)">
								</u-tag>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<u-button shape="circle" :text="'完成 (已选' + transientTagListInPopup.length + '个)'" size="large"
						color="linear-gradient(to right, #F8D43D, #F1903D)" @click="confirmAndSaveTags"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/config/index.js'
	import {
		postGuide,
		getHotTopics,
		postChooseTopic,
		getGuide
	} from '@/request/api.js';
	export default {
		data() {
			return {
				fileList1: [],
				queryParams: {
					avatar: '/static/chat/icon_xc.png',
					nickName: '',
					imageList: [],
					remark: ''
				},
				windowWidth: 0,
				tagInput: '',
				tags: [],
				showTagSelectionPopup: false,
				newCustomTagInPopup: '',
				popupTagCategories: [],
				transientTagListInPopup: [], // 弹框内临时选择的标签（包含预设和自定义）
				tagList: [], // 最终选择的标签列表
				isTagEdit: false,
				tagBg: [{
					color: '#3c9cff',
					iconClass: 'icon-tag1'
				}, {
					color: '#f9ae3d',
					iconClass: 'icon-tag2'
				}, {
					color: '#5ac725',
					iconClass: 'icon-tag3'
				}, {
					color: '#f56c6c',
					iconClass: 'icon-tag4'
				}, {
					color: '#909399',
					iconClass: 'icon-tag5'
				}],
				cachedTagIcons: [],
				originalData: {},
				tagColorMap: {} // 用于存储标签ID到颜色索引的映射
			};
		},

		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.windowWidth = systemInfo.windowWidth;
			this.initDate()
		},

		computed: {
			uploadImageSize() {
				const windowWidthRpx = this.windowWidth * 2;
				const marginHorizontal = 140;
				const paddingHorizontal = 40;
				const gap = 40;
				const availableWidth = windowWidthRpx - marginHorizontal - paddingHorizontal - gap;
				const size = Math.floor(availableWidth / 3);
				return size;
			}
		},

		watch: {
			tagBg: {
				immediate: true,
				deep: true,
				async handler(newVal) {
					if (newVal && newVal.length > 0) {
						// this.cachedTagIcons = newVal.map(item => item.iconClass);
					} else {
						this.cachedTagIcons = [];
					}
				}
			},
		},

		methods: {
			initDate() {
				let userId = this.$store.state.userInfo.userId
				getGuide(userId).then(res => {
					console.log('获取向导信息:', res.data.data);
					if (res.data.code == 200) {
						const data = res.data.data;
						this.originalData = res.data.data
						// 回显基础信息
						this.queryParams.avatar = data.avatar || '/static/chat/icon_xc.png'
						this.queryParams.nickName = data.nickName || ''
						this.queryParams.remark = data.ext4 || ''

						// 回显背景图片
						if (data.ext3) {
							this.queryParams.imageList = data.ext3.split(',').filter(url => url.trim() !==
								'');
							// 适配 u-upload 组件的文件列表格式
							this.fileList1 = this.queryParams.imageList.map(url => ({
								url: url,
								status: 'success',
								message: ''
							}));
						}

						// 回显标签数据
						if (data.guideTag) {
							// 将标签字符串转换为数组
							const tagTitles = data.guideTag.split(',').filter(tag => tag.trim() !== '');
							this.tagList = tagTitles.map(title => ({
								topicId: 'loaded_' + Date.now() + Math.random(), // 生成临时ID
								topicTitle: title.trim(),
								isPredefined: false // 默认为自定义标签
							}));
						}

						console.log('回显的标签数据:', this.tagList);
					}
				}).catch(err => {
					console.error('获取向导信息失败:', err);
					uni.showToast({
						title: '获取信息失败',
						icon: 'none'
					});
				});
			},

			// 获取弹框中的自定义标签
			getCustomTagsInPopup() {
				return this.transientTagListInPopup.filter(tag => !tag.isPredefined);
			},

			// 获取弹框中的预设标签
			getPredefinedTagsInPopup() {
				return this.transientTagListInPopup.filter(tag => tag.isPredefined);
			},

			// 确认并保存标签
			async confirmAndSaveTags() {
				this.tagList = [...this.transientTagListInPopup];
				// 为新添加的标签分配颜色索引（如果还没有的话）
				this.tagList.forEach((tag, index) => {
					this.getTagIndex(tag.topicId, index);
				});
				this.closeTagSelectionPopup();

				uni.showToast({
					title: '标签已保存',
					icon: 'success'
				});
			},

			// 添加自定义标签
			async addCustomTagFromPopupInput() {
				if (!this.newCustomTagInPopup.trim()) {
					uni.showToast({
						title: '请输入标签内容',
						icon: "none"
					});
					return;
				}

				// 检查是否已存在相同标签
				const isDuplicate = this.transientTagListInPopup.some(tag =>
					tag.topicTitle === this.newCustomTagInPopup.trim()
				);

				if (isDuplicate) {
					uni.showToast({
						title: '该标签已存在',
						icon: "none"
					});
					return;
				}

				try {
					const res = await postChooseTopic({
						title: this.newCustomTagInPopup.trim()
					});

					console.log('添加自定义标签响应:', res);

					// 检查响应结构
					if (res && res.data) {
						if (res.data.code === 200) {
							// 成功情况
							const newTagData = {
								topicId: res.data.data.topicId,
								topicTitle: res.data.data.title,
								isPredefined: false
							};

							// 添加到临时标签列表
							if (!this.transientTagListInPopup.some(t => t.topicId === newTagData.topicId)) {
								// 为新标签分配颜色索引
								this.getTagIndex(newTagData.topicId, this.transientTagListInPopup.length);
								this.transientTagListInPopup.push(newTagData);
							}

							this.newCustomTagInPopup = '';

							uni.showToast({
								title: '标签添加成功',
								icon: 'success'
							});

						} else if (res.data.code === 500) {
							// 服务器错误
							uni.showToast({
								title: res.data.msg || '服务器错误',
								icon: "none"
							});
						} else {
							// 其他错误码
							uni.showToast({
								title: res.data.msg || '添加失败',
								icon: "none"
							});
						}
					} else {
						// 响应数据为空
						uni.showToast({
							title: '服务器响应异常',
							icon: "none"
						});
					}

				} catch (error) {
					console.error('添加自定义标签捕获错误:', error);

					// 更详细的错误信息
					let errorMsg = '添加自定义标签失败';

					if (error.errMsg) {
						if (error.errMsg.includes('timeout')) {
							errorMsg = '网络请求超时，请重试';
						} else if (error.errMsg.includes('fail')) {
							errorMsg = '网络连接失败，请检查网络';
						}
					}

					uni.showToast({
						title: errorMsg,
						icon: "none"
					});
				}
			},

			// 删除自定义标签
			removeCustomTagInPopup(index) {
				// 找到要删除的自定义标签在 transientTagListInPopup 中的实际索引
				const customTags = this.getCustomTagsInPopup();
				if (customTags[index]) {
					const tagToRemove = customTags[index];
					const actualIndex = this.transientTagListInPopup.findIndex(tag =>
						tag.topicId === tagToRemove.topicId
					);
					if (actualIndex > -1) {
						this.transientTagListInPopup.splice(actualIndex, 1);
						uni.showToast({
							title: '标签已删除',
							icon: 'success'
						});
					}
				}
			},

			// 删除已选标签
			removeSelectedTag(index) {
				this.tagList.splice(index, 1);
				uni.showToast({
					title: '标签已删除',
					icon: 'success'
				});
			},

			// 获取标签颜色索引
			getTagIndex(tagId, index = 0) {
				// 如果已经有分配的颜色索引，则使用已分配的
				if (this.tagColorMap[tagId] !== undefined) {
					return this.tagColorMap[tagId] % this.tagBg.length;
				}

				// 如果没有分配，则根据索引分配并保存
				const colorIndex = Math.abs(index) % this.tagBg.length;
				this.$set(this.tagColorMap, tagId, colorIndex);
				return colorIndex;
			},

			isTagSelectedInPopup(topicId) {
				return this.transientTagListInPopup.some(tag => tag.topicId === topicId);
			},

			toggleTagInPopup(tagItem) {
				const existingTagIndex = this.transientTagListInPopup.findIndex(t => t.topicId === tagItem.topicId);
				if (existingTagIndex > -1) {
					// 删除时保留颜色映射
					this.transientTagListInPopup.splice(existingTagIndex, 1);
				} else {
					// 添加时确保颜色映射存在
					this.getTagIndex(tagItem.topicId, this.transientTagListInPopup.length);
					this.transientTagListInPopup.push({
						topicId: tagItem.topicId,
						topicTitle: tagItem.title || tagItem.topicTitle,
						isPredefined: true
					});
				}
			},

			async openTagSelectionPopup() {
				this.transientTagListInPopup = [...this.tagList];

				try {
					const res = await getHotTopics({
						title: '向导标签'
					});
					if (res.data && res.data.data) {
						this.popupTagCategories = res.data.data.map(category => {
							return {
								...category,
								topicsList: category.topicsList.map(tag => ({
									...tag,
									title: tag.title || tag.topicTitle
								}))
							};
						});
					} else {
						this.popupTagCategories = [];
					}
				} catch (error) {
					uni.$u.toast('获取热门标签失败');
					this.popupTagCategories = [];
				}
				this.showTagSelectionPopup = true;
			},

			closeTagSelectionPopup() {
				this.showTagSelectionPopup = false;
				this.newCustomTagInPopup = '';
			},

			goBack() {
				uni.navigateBack();
			},

			async uploadAvatar() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						const tempFile = res.tempFiles[0];
						const filePath = res.tempFilePaths[0];

						uni.showLoading({
							title: '上传中...'
						});
						try {
							const result = await this.uploadFilePromise(filePath);
							// 更新到 queryParams
							this.queryParams.avatar = result;
						} catch (error) {
							uni.$u.toast(error.message || '操作失败');
						} finally {
							uni.hideLoading();
						}
					},
					fail: (err) => {
						if (err.errMsg !== 'chooseImage:fail cancel') {
							uni.$u.toast('选择图片失败');
						}
					}
				});
			},

			// 提交表单
			submitForm() {

				let userId = this.$store.state.userInfo.userId;
				const backgroundImages = this.queryParams.imageList.join(',');
				const tags = this.tagList.map(tag => tag.topicTitle).join(',');

				// 判断是否修改了头像或达人介绍
				let isAvatarChanged = false;
				let isRemarkChanged = false;
				let isNickChanged = false;

				isAvatarChanged = this.originalData.avatar !== this.queryParams.avatar;
				isRemarkChanged = this.originalData.ext4 !== this.queryParams.remark;
				isNickChanged = this.originalData.nickName !== this.queryParams.nickName;

				// 动态设置 expertStarts
				let expertStartsValue = 1; // 默认值
				if (isAvatarChanged || isRemarkChanged || isNickChanged) {
					expertStartsValue = 3; // 修改了头像或达人介绍
				}

				let params = {
					avatar: this.queryParams.avatar,
					nickName: this.queryParams.nickName,
					ext3: backgroundImages,
					ext4: this.queryParams.remark,
					guideTag: tags,
					userId: this.$store.state.userInfo.userId,
					guideStarts: expertStartsValue

				}

				postGuide(params).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.data.msg || '保存失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('保存失败:', err);
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				});
			},

			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;

				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});

				for (let i = 0; i < lists.length; i++) {
					try {
						const result = await this.uploadFilePromise(lists[i].url);
						let item = this[`fileList${event.name}`][fileListLen];
						this[`fileList${event.name}`].splice(
							fileListLen,
							1,
							Object.assign(item, {
								status: "success",
								message: "",
								url: result,
							})
						);
						// 同时更新到 imageList
						this.queryParams.imageList.push(result);
					} catch (error) {
						let item = this[`fileList${event.name}`][fileListLen];
						this[`fileList${event.name}`].splice(
							fileListLen,
							1,
						);
						uni.showToast({
							title: error.message || '上传失败',
							icon: 'none'
						});
					}
					fileListLen++;
				}
			},
			// 主页预览
			handleLook() {
				let userId = this.$store.state.userInfo.userId
				// 将对象转换为 JSON 字符串，然后进行编码
				uni.navigateTo({
					url: `/pages_sub/guide/guide-detail?userId=` + userId
				});
			},
			uploadFilePromise(url) {
				let _that = this;
				const base_url = config.baseURL;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: base_url + '/qnyUpload/upload',
						filePath: url,
						name: "file",
						header: {
							'Authorization': uni.getStorageSync('token') || '',
							'Accept': 'application/json'
						},
						success: (res) => {
							if (res.statusCode === 413) {
								reject(new Error('图片过大，请选择较小的图片'));
								return;
							}

							if (res.statusCode !== 200) {
								reject(new Error(`上传失败，状态码：${res.statusCode}`));
								return;
							}

							try {
								const responseData = typeof res.data === 'string' ? JSON.parse(res
									.data) : res.data;

								if (responseData.code === 200) {
									const imageUrl = responseData.url;
									resolve(imageUrl);
								} else {
									console.error('上传失败:', responseData);
									reject(new Error(responseData.msg || '上传失败'));
								}
							} catch (error) {
								console.error('响应数据解析失败:', error);
								reject(new Error('服务器响应格式错误'));
							}
						},
						fail: (err) => {
							if (err.errMsg && err.errMsg.includes('request:fail')) {
								reject(new Error('网络连接失败，请检查网络设置'));
							} else {
								reject(new Error('网络请求失败'));
							}
						}
					});
				});
			},

			// 删除图片
			deletePic(event) {
				const deleteFile = event.file;
				if (deleteFile && deleteFile.url) {
					const urlIndex = this.queryParams.imageList.indexOf(deleteFile.url);
					if (urlIndex > -1) {
						this.queryParams.imageList.splice(urlIndex, 1);
					}
				}
				this[`fileList${event.name}`].splice(event.index, 1);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.header {
			background-image: url(@/static/authentication/editExportHeader.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 232rpx;
			width: 100%;
			flex-shrink: 0;

			.header-content {
				padding-top: var(--status-bar-height);
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.back-button {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
				}

				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #000;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}

				.placeholder {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
		}

		.content-scroll {
			flex: 1;
			background-image: url(@/static/authentication/editExportFooter.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.content {
			min-height: 100%;
			display: flex;
			flex-direction: column;
			padding-bottom: 140rpx; /* 为底部固定按钮留出空间 */

			.content-box {
				margin: 0 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				border-radius: 20rpx;
				height: 100rpx;
				padding: 0 20rpx;
				margin-bottom: 20rpx;

				.content-box-left {
					min-width: 100rpx;
					font-size: 30rpx;
					font-weight: bold;
				}

				.content-box-right {
					width: 70rpx;
					height: 70rpx;

					image {
						border-radius: 16rpx;
						width: 100%;
						height: 100%;
					}
				}

				.content-box-ipt {
					min-width: 160rpx;
				}
			}

			.content-box-type2 {
				background-color: #fff;
				padding: 0 20rpx;
				border-radius: 20rpx;
				margin: 0 60rpx 20rpx;

				.content-box-type2-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 90rpx;

					.content-box-type2-title-left {
						display: flex;
						align-items: center;

						.content-box-type2-title-left-t1 {
							font-size: 30rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}

						.content-box-type2-title-left-t2 {
							font-size: 26rpx;
							font-weight: 400;
							color: #999;
						}
					}

					.add-tag-btn {
						color: #ff9900;
						font-size: 28rpx;
						padding: 10rpx 20rpx;
					}
				}

				.content-box-type2-footer {
					margin-top: 20rpx;
					padding-bottom: 20rpx;

					.content-box-type2-footer-bottom {
						font-size: 24rpx;
						color: rgba(120, 120, 130, 1);
						line-height: 26rpx;
						padding-top: 20rpx;
						padding-bottom: 30rpx;
					}

					.My-textarea {
						border-radius: 10rpx;
						position: relative;

						.inputCount {
							position: absolute;
							bottom: 20rpx;
							right: 20rpx;
							font-size: 24rpx;
							color: #999;
							padding: 4rpx 10rpx;
							border-radius: 6rpx;
							background: rgba(255, 255, 255, 0.8);
						}
					}

					.my-block {
						background: #FFFFFF;
						border-radius: 20rpx;
						overflow: hidden;
						position: relative;

						.tag-header-container {
							display: flex;
							flex-direction: column;

							.selected-tags-container {
								.selected-tags-title {
									font-size: 28rpx;
									font-weight: bold;
									margin-bottom: 20rpx;
									color: #333;
								}

								.selected-tags-list {
									display: flex;
									flex-wrap: wrap;

									.selected-tag-item {
										margin-right: 20rpx;
										margin-bottom: 20rpx;
									}
								}
							}

							.no-tags-prompt {
								color: #999;
								font-size: 28rpx;
								text-align: center;
								padding: 40rpx 0;
							}
						}
					}
				}
			}

			.footer-spacer {
				height: 40rpx;
			}
		}

		/* 固定在底部的按钮样式 */
		.footer-btn-wrapper-fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 50rpx;
			gap: 20rpx;
			background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9) 30%, #fff);
			z-index: 999;
			
			.footer-btn-fixed {
				background-color: rgba(191, 191, 191, 1);
				font-weight: 900;
				font-size: 36rpx;
				line-height: 36rpx;
				padding: 30rpx 36rpx;
				text-align: center;
				flex: 1;
				border-radius: 40rpx;
				color: #fff;
				box-shadow: 0 8rpx 20rpx rgba(255, 179, 39, 0.3);
			}

			.footer-btn-fixed:last-child {
				background-color: rgba(255, 179, 39, 1);
				color: white;
			}
		}

		.tag-popup-content {
			padding: 20rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			height: 80vh;

			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
				margin-bottom: 20rpx;
			}

			.popup-scroll-content {
				flex: 1;
				padding-bottom: 20rpx;
			}

			.popup-footer {
				margin-top: 20rpx;
				padding: 20rpx 0;
				border-top: 1rpx solid #eee;
			}

			.tag-category-section {
				margin-bottom: 30rpx;
			}

			.popup-section-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				color: #333;
			}

			.custom-tag-input-section {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.custom-tag-input-add {
					margin-left: 10rpx;
				}
			}

			.custom-tags-display-section {
				margin-top: 20rpx;
			}

			.tag-item-container {
				display: flex;
				flex-wrap: wrap;

				.popup-tag-item {
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>